<template>
	<view class="center">
		<!-- <view class="tit"></view>
		<view class="title">
			<view class="arrow" @tap="$back()">
				<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../../static/stock/left.png" mode="aspectFit"></image>
			</view>
			<text>客户收款明细</text>
			<view class="ima" @click="Sizer" @tap="$open('../../collection/collectionSele/collectionSele')">
				<image src="../../../../static/images/732.png" mode=""></image>
			</view>
		</view> -->
		<hea-ders title="客户收款明细">
			<image class="left" slot='left' src="../../../../static/stock/left.png" mode="widthFix" @click="back"></image>
			<image class="Rright" slot='Rright' src="../../../../static/images/732.png" mode="widthFix" @click="back"@tap="$open('../../collection/collectionSele/collectionSele')"></image>
		</hea-ders>
		<view class="seach">
			<input type="text" value="" placeholder="客户名称" />
		</view>
		<view class="gathering_one">
			<text class="texts">增加应收</text>
			<text class="text">0</text>
		</view>
		<view class="gathering_two">
			<view class="gathering_two_ite">
				<text>此前余额</text>
			</view>
			<view class="gathering_two_item" style="">
				<view class="texts">
					<text>增加应收：0</text>
				</view>
				<view class="texts">
					<text>期末应收：0</text>
				</view>
			</view>
		</view>
		<view class="gathering_three" >
			<view class="gathering_three_item">
				<text>WMK-20200610-019</text>
				<view class="">
					<text>是否对账</text>
					<switch @change="switch2Change" />
				</view>
			</view>
			<view class="item" @tap="$open('../../client/close/close')">
				<text>收款单</text>
				<text>2020-06-10</text>
				<text>18511111111</text>
			</view>
			<view class="gatherng_five"v-if="flag1">
				<text>确认人：李一一</text>
			</view>
		</view>
	
		<view class="gathering_four" >
			<view class="texts">
				<text>增加应收：0</text>
			</view>
			<view class="texts">
				<text>期末应收：0</text>
			</view>
		</view>
		
		<view class="tan" v-if="flag">
			<view class="zong">
				<textarea v-model="yuanyi" value="" placeholder="请输入您的姓名" />
				<view class="bir">
					<text @click="flag =!flag">取消</text>
					<text style="color: rgba(35, 153, 246, 1);" @click="schedule">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import heaDers from '@/pages/header/header.vue'
	export default {
		components:{
			heaDers
		},
		data() {
			return {
				flag:false,
				flag1:false,
			};
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 弹窗的事件
			switch2Change: function(e) {
				console.log('switch2 发生 change 事件，携带值为', e.target.value);
				if(e.target.value === true){
					this.flag =!this.flag;
					this.flag1 =!this.flag1
				}else if(e.target.value === false){
					this.flag1 = !this.flag1
				}
			}
		}
	}
</script>

<style lang="scss">
.center {
	width: 100%;
	box-sizing: border-box;
	background: rgba(245, 245, 245, 1);
	.title {
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: rgba(36, 153, 246, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		image {
			width: 22rpx;
		}
		text {
			font-size: 36rpx;
			color: #fff;
			font-weight: 400;
			font-family: PingFang SC;
		}
		.ima {
			text {
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:500;
				line-height:33rpx;
				color:rgba(255,255,255,1);
				opacity:1;
			}
			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 5rpx;
			}
		}
	}
	.seach {
		width: 100%;
		background: #fff;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		.search_d {
			width: 40rpx;
			position: absolute;
			left: 8%;
			top: 15%;
		}
		input {
			width: 100%;
			height: 64rpx;
			background-color: rgba(245, 245, 245, 1) !important;
			border-radius: 32rpx;
			padding-left: 80rpx;
			box-sizing: border-box;
			background: url(@/static/images/search.png) no-repeat ;
			background-position:5% 50% ;
			background-size:6% ;
			font-size: 24rpx;
			font-family:PingFang SC;
			font-weight:400;
		}
		.seach_con {
			border-bottom: 1rpx solid #e0e0e0;
			width: 100%;
			height: 64rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			
			.ims {
			display: inline-block ;
			width: 40rpx;
			margin-right: 30rpx;
			}
			text {
				font-size:20rpx;
				font-family:PingFang SC;
				font-weight:500;
				line-height:28rpx;
				color:rgba(117,117,117,1);
				opacity:1;
			}
		}
	}
	.gathering_one{
		height: 128rpx;
		background: #2399F6;
		text{
			display: block;
			text-align: center;
			font-size: 24rpx;
			color: #C5E5FF;
			font-family:PingFang SC;
			font-weight:400;
		}
		.texts{
			padding-top: 24rpx;
		}
		.text{
			color: #fff;
			font-size: 28rpx;
			padding-top: 16rpx;
		}
	}
	.gathering_two{
		background: #fff;
		.gathering_two_ite{
			height: 72rpx;
			line-height: 72rpx;
			border-bottom: 1px solid #F5F5F5;
		}
		text{
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:500;
			color: #212121;
			padding-left: 30rpx;
		}
		.gathering_two_item{
			height: 56rpx;
			line-height: 56rpx;
			display: flex;
			align-items: center;
			text{
				font-size:20rpx;
				font-family:PingFang SC;
				font-weight:500;
				color: #616161;
			}
			.texts{
				width: 45%;
				
			}
		}
	}
	.gathering_three{
		background: #fff;
		.gathering_three_item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0rpx 0rpx 30rpx;
			
			margin-top: 15rpx;
			text{
				font-size: 24rpx;
			}
			switch{
				transform: scale(0.6);
			}
			
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 30rpx;
			font-size: 24rpx;
			color: #212121;
			font-family:PingFang SC;
			font-weight:500;
		}
	}
	.gathering_four{
		font-size: 20rpx;
		color: #616161;
		display: flex;
		padding-left: 30rpx;
		height: 56rpx;
		background: #fff;
		line-height: 56rpx;
		border-top:1px solid #F5F5F5 ;
		.texts{
			width: 47%;
		}
	}
	.tan {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color:rgba(0, 0, 0, .5) ;
		
	
	}
	.zong {
	position: relative;
		margin:65% auto;
		background-color: #fff;
		width: 70%;
		height:240rpx;
		border-radius: 5%;
		box-sizing: border-box;
		text {
			margin-left: 60rpx;
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:400;
			line-height:33rpx;
			color:rgba(97,97,97,1);
			opacity:1;
		}
		textarea {
			width: 94%;
			height: 60%;
			padding-left:30rpx;
			padding-top: 20rpx;
			border-bottom: 2px solid #f5f5f5;
		}
		.bir{
		position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			text-align: center;
			width: 90%;
			
		text {
			height: 60rpx;
			line-height: 60rpx;
			flex: 1;
			display: inline-block;
		}
		}
	}
	.gatherng_five{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 30rpx;
		padding-bottom: 21rpx;
		background: #fff;
		text{
			font-size:24rpx;
			font-family:PingFang SC;
			font-weight:500;
			color: #212121;
		}
	}
		
}

</style>
